<template>
  <view class="page-body" v-if="showPage">
    <div class="store-info">
      <img id="b_avt" :src="store.logo" alt="" />
      <div id="b_name">{{ store.name }}</div>
    </div>
    <div class="item">
      <div class="label">订单状态</div>
      <div class="text">支付成功</div>
    </div>
    <div class="item">
      <div class="label">订单尾号</div>
      <div class="text">{{ order.order_no_last }}</div>
    </div>
    <div class="item">
      <div class="label">支付金额</div>
      <div id="price" class="text">¥{{ order.pay_price }}</div>
    </div>
    <div
      @click="toUrl(1)"
      id="backHome"
      class="btn-home"
    >
      查看订单
    </div>
    <div
      @click="toUrl(0)"
      id="toOrder"
      class="btn-detail"
    >
      返回首页
    </div>
  </view>
</template>
<script>
import axios from "@/common/http.js";
export default {
  data() {
    return {
      store: {},
      order: {},
      showPage: true,
      params: {},
    };
  },
  onLoad() {
    let script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js";
    document.body.appendChild(script);
    this.params = this.$utils.oneValues(window.location.hash);
    this.loadData();
  },
  onShow() {},
  methods: {
    async loadData() {
      let data = {
        order_no: this.params.out_trade_no,
      };
      const res = await axios.GET("/order/goldplan", data, true);

      this.store = res.data.store;
      this.order = res.data.order;

      var initData = {
        action: "onIframeReady",
        displayStyle: "SHOW_CUSTOM_PAGE",
      };
      var initPostData = JSON.stringify(initData);
      parent.postMessage(initPostData, "https://payapp.weixin.qq.com");
    },
    toUrl(type = 1) {
      let url = '/pages/home/home'
      if(type == 1) {
        switch (this.order.order_type) {
          case 1:
            url = '/order/order/order'
            break;
        
          default:
            url = '/pages/my/my'
            break;
        }
      } else {
        url = '/pages/home/home'
      }
      let {origin ,pathname } = window.location
      var mchData = {
        action: "jumpOut",
        jumpOutUrl: origin + pathname + '#' + url, //跳转的页面
      };
      var postData = JSON.stringify(mchData);
      parent.postMessage(postData, "https://payapp.weixin.qq.com");
    },
  },
  computed: {},
  watch: {},
  onReachBottom() {},
  onPullDownRefresh() {},
};
</script>
<style lang="scss" scoped>
body {
  font-family: PingFang SC, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  color: #222;
}
.store-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  #b_avt {
    margin-top: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f2f2f2;
  }
  #b_name {
    font-size: 16px;
    margin-top: 6px;
  }
}

.item {
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
}

.btn-home {
  background: #00c12b;
  color: #fff;
  border-radius: 40px;
  line-height: 44px;
  text-align: center;
  margin: 30px auto 0;
  width: 200px;
}

.btn-detail {
  text-align: center;
  margin-top: 14px;
  font-size: 14px;
  color: #666;
}
</style>
